<template>
    <dv-border-box1>
        <div ref="fullscreenRef" style="overflow: auto; height: 100%">
            <div class="title">履责异常预警</div>
            <div class="tag-wrap">
                <div class="tag" :class="state.activeIndex === 0 && 'active'" @click="state.activeIndex = 0">履责责任</div>
                <div class="tag" :class="state.activeIndex === 1 && 'active'" @click="state.activeIndex = 1">技术服务</div>
                <div class="tag" :class="state.activeIndex === 2 && 'active'" @click="state.activeIndex = 2">灭火器管理</div>
                <div class="tag" style="padding: 2px; display: flex; align-items: center; justify-content: center"
                    @click="test">
                    <img style="width: 15px; height: 15px" src="@/assets/images/fullscreen.png" alt="全屏" />
                </div>
            </div>
            <div class="list-box" v-if="state.activeIndex === 0">
                <div class="list-item" v-for="item in state.list1" :key="item.id"
                    @click="showTableList(item.component, item.type)">
                    <div class="index">{{ item.id }}</div>
                    <div class="name">{{ item.label }}</div>
                    <div :class="['num', item.value && 'color-num']">{{ item.value }}</div>
                </div>
            </div>
            <div class="list-box" v-else-if="state.activeIndex === 1">
                <div class="list-item" v-for="item in state.list2" :key="item.id"
                    @click="showTableList(item.component, item.type)">
                    <div class="index">{{ item.id }}</div>
                    <div class="name">{{ item.label }}</div>
                    <div :class="['num', item.value && 'color-num']">{{ item.value }}</div>
                </div>
            </div>
            <div class="list-box" v-else>
                <div class="list-item" v-for="item in state.list3" :key="item.id"
                    @click="showTableList(item.component, item.type)">
                    <div class="index">{{ item.id }}</div>
                    <div class="name">{{ item.label }}</div>
                    <div :class="['num', item.value && 'color-num']">{{ item.value }}</div>
                </div>
            </div>
            <el-dialog v-model="tableDialog.tableDialogVisabled2" title="履责预警" width="800px" destroy-on-close
                :close-on-click-modal="false">
                <el-radio-group v-model="state.activeIndex" size="medium">
                    <el-radio-button :label="0">履责责任</el-radio-button>
                    <el-radio-button :label="1">技术服务</el-radio-button>
                    <el-radio-button :label="2">灭火器管理</el-radio-button>
                </el-radio-group>
                <el-table
                    :data="state.activeIndex === 0 ? state.list1 : state.activeIndex === 1 ? state.list2 : state.list3">
                    <el-table-column type="index" width="80"></el-table-column>
                    <el-table-column prop="label" min-width="120"></el-table-column>
                    <el-table-column prop="value" min-width="80"></el-table-column>
                    <el-table-column min-width="80">
                        <template #default="{ row }">
                            <el-button size="mini" @click="showTableList(row.component, row.type)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
            <markListDia ref="markList"></markListDia>
            <el-dialog :fullscreen="fullscreen" v-model="tableDialog.tableDialogVisabled" width="70%" destroy-on-close
                style="text-align: left" :close-on-click-modal="false">

                <div class="avue-crud__dialog__menu">
                    <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
                </div>
                <component :is="dom[tableDialog.tableComponentName]" :data="tableDialog.earlyWarning" :patrol_status="1"
                    :drillTrainType="tableDialog.drillTrainType">
                </component>
            </el-dialog>
        </div>
    </dv-border-box1>
</template>

<script lang="ts" setup>
import { reactive, ref, shallowReactive } from 'vue'
import { earlyWarning, equipments } from '@/api/dashboard'
import unitMange from '../safeMarks/components/unitMange.vue'
import dangerWcl from '../safeMarks/components/dangerWcl.vue'
import drillTrain from '../safeMarks/components/drillTrain.vue'
import overtimeHighBuildingUnitTotal from '../safeMarks/components/overtimeHighBuildingUnitTotal.vue'
import faceRecognitionMismatch from '../safeMarks/components/faceRecognitionMismatch.vue'
import workOrderTotal from '../safeMarks/components/workOrderTotal.vue'
import outPlanLocationTotal from '../safeMarks/components/outPlanLocationTotal.vue'
import notOnTimeGive from '../safeMarks/components/notOnTimeGive.vue'
import twoMonthDangerUnitSourceWbTotal from '../safeMarks/components/twoMonthDangerUnitSourceWbTotal.vue'
import thirdOneClose from '../../../thirdOneClose/index.vue'
import hiddenDangerMange from '../safeMarks/components/hiddenDangerMange.vue'
import thermalPowerList from '../safeMarks/components/thermalPowerList.vue'
import flueClean from '../../../flueClean/index.vue'
import markListDia from '../safeMarks/components/markListDia.vue'
import study from '../safeMarks/components/study.vue'
import unitTaskMange from '../safeMarks/components/unitTaskMange.vue'
import activity from '@/views/activity/activity.vue'
import rehearsal from '@/views/rehearsal/rehearsal.vue'
import pinggubaogao from '@/views/pinggubaogao/index.vue'
import screenfull from 'screenfull'
const dom = shallowReactive({
    unitMange,
    dangerWcl,
    drillTrain,
    study,
    activity,
    rehearsal,
    pinggubaogao,
    overtimeHighBuildingUnitTotal,
    faceRecognitionMismatch,
    workOrderTotal,
    outPlanLocationTotal,
    notOnTimeGive,
    flueClean,
    unitTaskMange,
    thermalPowerList,
    hiddenDangerMange,
    thirdOneClose,
    twoMonthDangerUnitSourceWbTotal
})
const markList = ref()
const fullscreenRef = ref()
const tableDialog = reactive({
    tableDialogVisabled: false,
    tableDialogVisabled2: false,
    tableComponentName: '',
    earlyWarning: 0,
    drillTrainType: ''
})
let fullscreen = ref(false)

const state = reactive({
    activeIndex: 0,
    statusCount: {},
    list1: [
        {
            id: 1,
            label: '未及时巡查检查',
            value: 0,
            component: 'unitMange',
            type: ''
        },
        {
            id: 2,
            label: '未及时整改巡查检查不合格项',
            value: 0,
            component: 'dangerWcl',
            type: ''
        },
        {
            id: 3,
            label: '未及时组织消防演练',
            value: 0,
            component: 'rehearsal',
            type: ''
        },
        {
            id: 4,
            label: '未及时组织消防培训',
            value: 0,
            component: 'activity',
            type: ''
        },
        {
            id: 5,
            label: '高层民用建筑未及时完成消防安全评估',
            value: 0,
            component: 'pinggubaogao',
            type: ''
        },
        {
            id: 6,
            label: '巡查待审核',
            value: 0,
            component: 'unitTaskMange',
            type: ''
        },
        {
            id: 7,
            label: '三关一闭',
            value: 0,
            component: 'thirdOneClose',
            type: ''
        },
        {
            id: 8,
            label: '未学习',
            value: 0,
            component: 'study',
            type: ''
        },
        {
            id: 9,
            label: '动火动电',
            value: 0,
            component: 'thermalPowerList',
            type: ''
        },
        {
            id: 10,
            label: '公众举报',
            value: 0,
            component: 'hiddenDangerMange',
            type: ''
        },
        {
            id: 11,
            label: '烟道清洗',
            value: 0,
            component: 'flueClean',
            type: ''
        }
    ],
    list2: [
        {
            id: 1,
            label: '两个月未整改完成消防设施故障',
            value: 0,
            component: 'twoMonthDangerUnitSourceWbTotal',
            type: ''
        },
        {
            id: 2,
            label: '未按时完成技术服务报告',
            value: 0,
            component: 'notOnTimeGive',
            type: ''
        },
        {
            id: 3,
            label: '运行轨迹不符',
            value: 0,
            component: 'outPlanLocationTotal',
            type: ''
        },
        {
            id: 4,
            label: '人脸不符',
            value: 0,
            component: 'faceRecognitionMismatch',
            type: ''
        },
        {
            id: 5,
            label: '时间过短',
            value: 0,
            component: 'workOrderTotal',
            type: ''
        }
    ],
    list3: [
        {
            id: 1,
            label: '报废预警',
            value: 0,
            component: '',
            type: ''
        },
        {
            id: 2,
            label: '首次维修预警',
            value: 0,
            component: '',
            type: ''
        },
        {
            id: 3,
            label: '复修预警',
            value: 0,
            component: '',
            type: ''
        }
    ]
})

const showTableList = (component: string, type: string) => {
    console.log(component, type)
    switch (component) {
        case '设施设备隐患':
        case '日常巡查隐患':
        case '公众举报隐患':
            markList.value.init()
            break
        default:
            component && showTableComponent(component, type)
            break
    }
}
const showTableComponent = (component: string, type: string) => {
    if (component === 'unitMange') {
        tableDialog.earlyWarning = 10
    }
    if (type) {
        tableDialog.drillTrainType = type
    }
    tableDialog.tableComponentName = component
    tableDialog.tableDialogVisabled = true
}
earlyWarning().then((res) => {
    state.list1[0].value = res.data?.cq
    state.list1[1].value = res.data?.bhg
})
equipments({ is_wxc: 1 }).then((res) => {
    state.list1[2].value = res.data.total?.overtimeDrillUnitTotal || 0
    state.list1[3].value = res.data.total?.overtimeTrainUnitTotal || 0
    state.list1[4].value = res.data.total?.overtimeHighBuildingUnitTotal || 0
    state.list1[5].value = res.data.total?.unExamine || 0
    state.list1[6].value = res.data.total?.closeHiddenDangers || 0
    state.list1[7].value = res.data.learning?.participationNum || 0
    state.list1[8].value = res.data.total?.thermalPower || 0
    state.list1[9].value = res.data.total?.publicDanger || 0
    state.list1[10].value = res.data.total?.cleaningOfFlue || 0
    state.list2[0].value = res.data.total?.twoMonthDangerUnitSourceWbTotal || 0
    state.list2[1].value = res.data.total?.monthPlanUnit_total || 0
    state.list2[2].value = res.data.total?.outPlanLocationTotal || 0
    state.list2[3].value = res.data.total?.noSelfLocationTotal || 0
    state.list2[4].value = res.data.total?.workOrder_total || 0
})
const test = () => {
    tableDialog.tableDialogVisabled2 = true
}
</script>

<style lang="scss" scoped>
.dv-border-box-1 {
    font-size: 14px;

    .title {
        color: #edf4ff;
        height: 20px;
        font-family: 'myFont';
        font-size: 20px;

        img {
            height: 40px;
            margin-top: -4px;
        }
    }

    .tag-wrap {
        display: flex;
        justify-content: end;
        padding: 10px 15px 0;

        .tag {
            display: inline-block;
            margin-left: 20px;
            background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 280%);
            border: 1px solid #1f99c7;
            border-radius: 10px;
            color: #1f99c7;
            padding: 2px 4px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                color: #2989f8;
                box-shadow: 0 0 10px rgb(0, 140, 255);
            }
        }

        .active {
            color: #2989f8;
            font-weight: 700;
            box-shadow: 0 0 10px rgb(0, 140, 255);
        }
    }

    .list-box {
        margin-top: 10px;
        height: 64%;
        overflow: auto;
        width: 97%;

        &::-webkit-scrollbar {
            width: 8px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #2886f1;
        }

        &::-webkit-scrollbar-track {
            background-color: #4bc7d8;
            border-radius: 4px;
        }
    }

    .list-item {
        display: flex;
        color: #edf4ff;
        height: 25px;
        margin-bottom: 10px;
        cursor: pointer;

        .index {
            width: 20%;
        }

        .name {
            width: 65%;
        }

        .num {
            width: 15%;
        }

        .color-num {
            color: #eb7506;
            font-weight: 700;
        }
    }
}
</style>
